<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script src="./js_thematic_map_example/script/jq/jquery.min.js"></script>
    <script src="./js_thematic_map_example/data/js/shanghai.js"></script>

    <script>
        var amap = null;
        var that = this;

        var colors = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']

        var pollution = {
            "type": "FeatureCollection",
            "features": [
            ]
        }

        var uploadedDataURL = "./js_thematic_map_example/data/ShanghaiBuildingPrice.json";

        var num = 0.004028834999352; //决定柱子粗细
        // 根据上海分布点组装geojson柱状图数据
        $.get(uploadedDataURL, function (data) {
            data[0].forEach((item, i) => {
                var point = item.value;
                var coordinates = [[
                    point[0] - num,
                    point[1] + num,
                ],
                [
                    point[0] - num,
                    point[1] - num,
                ],
                [
                    point[0] + num,
                    point[1] - num,
                ],
                [
                    point[0] + num,
                    point[1] + num,
                ],
                [
                    point[0] - num,
                    point[1] + num,
                ]]

                var feature = {
                    type: "Feature",
                    properties: {
                        id: i + 1,
                        height: point[2],
                    },
                    geometry: {
                        type: "Polygon",
                        coordinates: [coordinates]
                    }
                }
                pollution.features.push(feature);
            });

        });

        map.Factory.create('mapui', {
            center: [106.71, 26.56],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            center: [121.4693, 31.123070],
            zoom: 10,
            style: style,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers'],
        }, (o) => {
            amap = o;

            amap.pmap.addSource("guiyangsource", {
                "type": "geojson",
                "data": shanghai
            })


            amap.pmap.addSource("pollutionsource", {
                "type": "geojson",
                "data": pollution
            })

            amap.pmap.addLayer({
                "id": "guiyanglayer",
                "type": "fill",
                "source": "guiyangsource",
                "paint": {
                    'fill-color': '#6C0000',
                    'fill-opacity': 0.3,
                    'fill-outline-color': '#1F3971'
                }
            })

            amap.pmap.addLayer({
                'id': 'ratio1',
                'source': 'pollutionsource',
                'type': 'fill-extrusion',
                'minzoom': 5,
                'paint': {
                    'fill-extrusion-color': [
                        "interpolate",
                        ["linear"],
                        ['get', 'height'],
                        0, colors[0],
                        10000, colors[1],
                        20000, colors[2],
                        30000, colors[3],
                        40000, colors[4],
                        50000, colors[5],
                        60000, colors[6],
                        70000, colors[7],
                        80000, colors[8],
                        90000, colors[9],
                        100000, colors[10]
                    ],
                    'fill-extrusion-height': ["*", ["to-number", ["get", "height"]], 0.8],
                    'fill-extrusion-base': 2,
                    'fill-extrusion-opacity': 1
                }
            })

            amap.easeTo({
                center: [121.83793763255449, 31.19117209154132],
                zoom: 8.188,
                pitch: 58,
                bearing: 99.08,
                speed: 100
            })

            amap.on('moveend', function () {
                console.log(amap.pmap.getCenter() + "," + amap.pmap.getPitch() + "," + amap.pmap.getBearing() + "," + amap.pmap.getZoom())
            });
        });
    </script>
</body>

</html>